<template>
	<view class="content">
		<view class="row b-b">
			<text class="tit">联系人</text>
			<input class="input" type="text" v-model="addressData.name" placeholder="收货人姓名" placeholder-class="placeholder" />
		</view>
		<view class="row b-b">
			<text class="tit">手机号</text>
			<input class="input" type="number" v-model="addressData.mobile" placeholder="收货人手机号码" placeholder-class="placeholder" />
		</view>
		<view class="row b-b">
			<text class="tit">地址</text>
			<text @click="chooseLocation" class="input">{{ addressData.addressName }}</text>
			<text class="yticon icon-shouhuodizhi"></text>
		</view>
		<view class="row b-b">
			<text class="tit">详情</text>
			<input class="input" v-model="addressData.note" type="text" placeholder="-栋-单元-号？....门卫？" placeholder-class="placeholder" />
		</view>

		<view class="row default-row">
			<text class="tit">设为默认</text>
			<switch :checked="addressData.default" color="#fa436a" @change="switchChange" />
		</view>
		<button class="add-btn" @click="confirm">确认修改</button>
	</view>
</template>

<script>
export default {
	data() {
		return {
			addressData: {
				name: '',
				mobile: '',
				addressName: '在地图选择',
				address: '',
				default: false,
				note: '',
			},
			addressId:''
		};
	},
	//获得url中的参数
	onLoad(option) {
		this.addressId=option.addressId;
		this.loadAddressData()
	},
	
	methods: {
		//请求加载数据
		loadAddressData(){
			uni.request({
				url: this.baseurl+'address/selectAddressByaid' ,
				method:'GET',
				data: {
					aid: this.addressId,
				},
				success: (res) => {
					console.log(res)
					let data=res.data.data
					this.addressData.name=data.siteName
					this.addressData.mobile=data.siteTelephone
					if(data.siteDetails!=''){
						this.addressData.addressName=data.siteDetails
						this.addressData.address=data.siteDetails
					}
					//1 为默认地址，0不是默认地址
					this.addressData.default=data.siteDefault==1
					this.addressData.note=data.siteNote
				}
			})
		},
		//修改默认地址
		switchChange() {
			//直接取反，修改单选框状态
			this.addressData.default = !this.addressData.default;
		},

		//地图选择地址
		chooseLocation() {
			uni.chooseLocation({
				success: data => {
					this.addressData.addressName = data.name;
					this.addressData.address = data.name;
				}
			});
		},

		//提交
		confirm() {
			let data = this.addressData;
			// console.log(this.addressData.default ? 1 : 0)
			if (!data.name) {
				this.$api.msg('请填写收货人姓名');
				return;
			}
			if (!/(^1[3|4|5|7|8][0-9]{9}$)/.test(data.mobile)) {
				this.$api.msg('请输入正确的手机号码');
				return;
			}
			if (!data.address) {
				this.$api.msg('请在地图选择所在位置');
				return;
			}
			
			let ownerId = this.$store.state.userInfo.id;
			//发送添加地址请求
			uni.request({
				url: this.baseurl+'address/updataAddress' ,
				method: 'PUT',
				//post请求需要添加头信息，不然请求不成功  因为这个模板小程序默认是 'content-type': 'application/json'的请求头
				header: {
					'content-type': 'application/x-www-form-urlencoded'
				},
				data: {
					aid:this.addressId,
					uid: this.$store.state.userInfo.id , //this.$store.state.userInfo.ownerId;   由于还没做登录操作，所以这里是模拟的
					siteDetails: this.addressData.addressName,
					siteDefault: this.addressData.default ? 1 : 0,
					siteNote: this.addressData.note,
					siteTelephone: this.addressData.mobile,
					siteName: this.addressData.name
				},
				success: res => {
					if (res.data == 200) {
						this.$api.msg(`修改成功`);
						setTimeout(() => {
							//如果直接返回的话，不会及时更新修改的地址,但是在返回到的页面使用onShow不用onLoad
							uni.navigateBack();
							// history.back();
							
							// uni.navigateTo({
							// 	url:'/pages/address/address'
							// })
							
							// this.$api.prePage().getData(2)  //this.$store.state.userInfo.ownerId;   由于还没做登录操作，所以这里是模拟的
							// history.back();
						}, 200);
					} else {
						this.$api.msg('修改失败');
					}
				}
			});
		}
	}
};
</script>

<style lang="scss">
page {
	background: $page-color-base;
	padding-top: 16upx;
}

.row {
	display: flex;
	align-items: center;
	position: relative;
	padding: 0 30upx;
	height: 110upx;
	background: #fff;

	.tit {
		flex-shrink: 0;
		width: 120upx;
		font-size: 30upx;
		color: $font-color-dark;
	}
	.input {
		flex: 1;
		font-size: 30upx;
		color: $font-color-dark;
	}
	.icon-shouhuodizhi {
		font-size: 36upx;
		color: $font-color-light;
	}
}
.default-row {
	margin-top: 16upx;
	.tit {
		flex: 1;
	}
	switch {
		transform: translateX(16upx) scale(0.9);
	}
}
.add-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 690upx;
	height: 80upx;
	margin: 60upx auto;
	font-size: $font-lg;
	color: #fff;
	background-color: $base-color;
	border-radius: 10upx;
	box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
}
</style>
